<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/Header&Footer.css">
    <link rel="stylesheet" href="./css/4details.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <!-- <link rel="stylesheet" href="./css/swiper.min.css"> -->
</head>

<body>
    <header>
        <div><img src="./image/index/logo.jpg" alt=""></div>
        <div>
            <img src="./image/index/my.jpg" alt="">
            <img src="./image/index/xiazai.jpg" alt="">
        </div>
    </header>
    <!-- nav -->
    <nav class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./image/rentalList/img1.png" alt=""></div>
            <div class="swiper-slide"><img src="./image/rentalList/img2.png" alt=""></div>
            <div class="swiper-slide"><img src="./image/rentalList/img3.png" alt=""></div>
            <div class="swiper-slide"><img src="./image/rentalList/img4.png" alt=""></div>
            <div class="swiper-slide"><img src="./image/rentalList/img5.png" alt=""></div>
        </div>
    </nav>
    <section>
        <ul class="section_ul1">
            <li>天鹅湾小区精两居，满五唯一，业主换房急售</li>
            <li><span>576</span>万元(单价：46327元/平)</li>
            <li>挂牌时间2015年6月20日</li>
            <li><span>学区房</span><span>独家</span><span>满五唯一</span></li>
        </ul>
        <ul class="section_ul2">
            <li><span>户型：3室2厅</span><span>面积：100平</span></li>
            <li><span>楼层：中楼层</span><span>朝向：西南</span></li>
            <li><span>装修：精装</span><span>楼型：塔楼</span></li>
            <li><span>年代：2004年</span><span>区域：西二旗</span></li>
            <li><span>首付：123万</span><span>月供：15383元</span></li>
            <li>地铁：离西二旗地铁站800米</li>
            <li>小区：珠江帝景</li>
            <li>学校：北京市第二实验小学</li>
            <li>
                <p> <a href="#">更多房源信息</a></p>
            </li>
        </ul>
        <!-- 房源特色 -->
        <div class="fangyuan">
            <p class="fangyuan_p1">房源特色</p>
            <p class="fangyuan_p2">小区环境优雅，虽处闹市中(小区南200米有美廉美超市、西30米有华联商场、星美国际影域、东北角就是大中电器、小区东100米有汇佳幼儿园、昌平实验一小，昆泰国际大酒...
            </p>
            <p class="fangyuan_p3"><a href="#">更多特色</a></p>
        </div>
        <!-- 户型分间 -->
        <div class="huxing">
            <p>户型分间</p>
            <ul class="huxing_ul1">
                <li>
                    <img src="./image/SecondHandList/img4.png" alt="">
                    <ul class="huxing_ul2">
                        <li>当前格局</li>
                        <li>分间信息:客厅25平米，南北通透</li>
                        <li><span>南北通透</span><span>全明格局</span></li>
                    </ul>
                </li>
                <li>
                    <img src="./image/SecondHandList/img4.png" alt="">
                    <ul class="huxing_ul2">
                        <li>当前格局</li>
                        <li>分间信息:客厅25平米，南北通透</li>
                        <li><span>南北通透</span><span>全明格局</span></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- 对口学校 -->
        <ul class="school">
            <li>对口学校</li>
            <li><span>学校名称：</span><span>北京市第二实验小学</span></li>
            <li><span>升学方式：</span><span>直升、派位</span></li>
            <li><span>对口中学：</span><span>团结湖中学</span></li>
            <li><span>划片小区：</span><span>3个划片小区 在售房源150套</span></li>
            <li><span>学校特色：</span><span>包食宿、有校车</span></li>
            <li>
                <p>查看信息详情</p>
            </li>
        </ul>
        <!-- 位置及周边 -->
        <div class="map">
            <p>位置及周边</p>
            <div id="container">
                <!-- <img src="./image/SecondHandList/map.png" alt=""> -->
            </div>
        </div>
        <!-- 推荐房源 -->
        <ul class="tuijian">
            <li>
                <div>
                    <img src="./image/index/img1.jpg" alt="">
                    <ul class="tuijian_text">
                        <li>文化部中间层 一层带...</li>
                        <li><span>2室1厅96m²南北</span><span>1105万</span></li>
                        <li><span>红庙北里</span><span>14268元/平</span></li>
                        <li><span>学区房</span></li>
                    </ul>
                </div><span class="sanjiao"></span>
                <p>推荐理由:同户型、通风好、采光好</p>
            </li>
            <li>
                <div>
                    <img src="./image/index/img1.jpg" alt="">
                    <ul class="tuijian_text">
                        <li>文化部中间层 一层带...</li>
                        <li><span>2室1厅96m²南北</span><span>1105万</span></li>
                        <li><span>红庙北里</span><span>14268元/平</span></li>
                        <li><span>学区房</span></li>
                    </ul>
                </div><span class="sanjiao"></span>
                <p>推荐理由:同户型、通风好、采光好</p>
            </li>
            <li>
                <div>
                    <img src="./image/index/img1.jpg" alt="">
                    <ul class="tuijian_text">
                        <li>文化部中间层 一层带...</li>
                        <li><span>2室1厅96m²南北</span><span>1105万</span></li>
                        <li><span>红庙北里</span><span>14268元/平</span></li>
                        <li><span>学区房</span></li>
                    </ul>
                </div><span class="sanjiao"></span>
                <p>推荐理由:同户型、通风好、采光好</p>
            </li>
            <li>
                <div>
                    <img src="./image/index/img1.jpg" alt="">
                    <ul class="tuijian_text">
                        <li>文化部中间层 一层带...</li>
                        <li><span>2室1厅96m²南北</span><span>1105万</span></li>
                        <li><span>红庙北里</span><span>14268元/平</span></li>
                        <li><span>学区房</span></li>
                    </ul>
                </div><span class="sanjiao"></span>
                <p>推荐理由:同户型、通风好、采光好</p>
            </li>
            <li>
                <div>
                    <img src="./image/index/img1.jpg" alt="">
                    <ul class="tuijian_text">
                        <li>文化部中间层 一层带...</li>
                        <li><span>2室1厅96m²南北</span><span>1105万</span></li>
                        <li><span>红庙北里</span><span>14268元/平</span></li>
                        <li><span>学区房</span></li>
                    </ul>
                </div><span class="sanjiao"></span>
                <p>推荐理由:同户型、通风好、采光好</p>
            </li>
            <li>
                <div>
                    <img src="./image/index/img1.jpg" alt="">
                    <ul class="tuijian_text">
                        <li>文化部中间层 一层带...</li>
                        <li><span>2室1厅96m²南北</span><span>1105万</span></li>
                        <li><span>红庙北里</span><span>14268元/平</span></li>
                        <li><span>学区房</span></li>
                    </ul>
                </div><span class="sanjiao"></span>
                <p>推荐理由:同户型、通风好、采光好</p>
            </li>
            <p>更多相似房源</p>
        </ul>
    </section>
    <footer>
        <p>
            <a href="">北京找房无忧网</a>>
            <a href="">首页</a>
        </p>
        <ul>
            <li>
                <div>
                    <img src="./image/index/apple.png" alt="">
                    <div>
                        <span>iphone</span><br>
                        <span>客户端</span>
                    </div>
                </div>
                <div>
                    <img src="./image/index/android.png" alt="">
                    <div>
                        <span>Android</span><br>
                        <span>客户端</span>
                    </div>
                </div>
            </li>
            <li>北京找房无忧房地产经纪有限公司</li>
            <li>网络经营许可证 京ICP备20160812号-12</li>
        </ul>
        <div class="footer_box">
            <button>联系经纪人</button>
            <button>关注</button>
        </div>
    </footer>
    <!-- <script src="./swiper.min.js"></script> -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YDyqqv0vFDmO8EdoOibzLDkTekjbzLRO"></script>
    <script src="./swiper.min.js"></script>
    <script>
        //百度地图
        var map = new BMapGL.Map("container"); // 创建地图实例 
        var point = new BMapGL.Point(113.680665, 34.804449); // 创建点坐标 
        var marker = new BMapGL.Marker(point); // 创建标注   
        map.addOverlay(marker); // 将标注添加到地图中
        map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.setHeading(64.5); //设置地图旋转角度
        map.setTilt(73); //设置地图的倾斜角度

        // 禁止地图旋转和倾斜可以通过配置项进行设置
        var map = new BMapGL.Map("allmap", {
            enableRotate: false,
            enableTilt: false
        });
    </script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            pagination: {
                el: ".swiper-pagination",
                type: "fraction",
            }
        });
    </script>
</body>

</html>